body,html{
	height:100%;
	margin: 0;
	-webkit-tap-highlight-color:transparent;
}
.page,body{
	background-color:#fbf9fe;
}
.container{overflow:hidden}
.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}

.page{
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	padding-bottom: 50px;
}
.page-relative {
	min-height: 100%;
	height: auto !important;
    height: 100%;
	margin: 0 auto -50px;
}
.page-fixed {
	height: 100%;
	overflow: hidden;
}
a {
	color: #009bf0;
}
a:active {
	color: #0071ae;
}

.hd{
	padding:20px 0;
}
.page_desc{
	text-align:center;
	color:#888;
	font-size:16px;
	margin-top: 10px;
	margin-bottom: -10px;
}
.bd.spacing{
	padding:0 15px;
}

.page_title{
	text-align:center;
	/*font-size:34px;*/
	color:#3cc51f;
	font-weight:400;
	margin:0 15%;
	height: 50px;
}

.global_navs{background-color:transparent}.global_navs:after,.global_navs:before{border-color:#d9dbda}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .page_title{color:#225fba}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .page_title{color:#225fba}.page.cell .bd{padding-bottom:30px}.page.toast{background-color:#fff}.page.toast .bd{padding:120px 15px 0}.page.dialog{background-color:#fff}.page.dialog .bd{padding:120px 15px 0}.page.article,.page.msg{background-color:#fff}.page.article .page_title{color:#de7c23}.page.icons{background-color:#fff;text-align:center}.page.icons .page_title{color:#3e24bd}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}

.weui_label {
    width: 4.3em;
}

.wechat-info {
	background: #efefef;
	padding: 15px;
	height: 70px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.wechat-avatar {
	position: relative;
	width: 50%;
	float: left;
	text-align: right;
}
.wechat-avatar img {
	width: 70px;
	height: 70px;
	position: relative;
	margin-right: 15px;
}
.wechat-name {
	width: 50%;
	float: right;
	text-align: left;
}
.wechat-name p {
	font-size: 18px;
	padding: 15px;
	vertical-align: center;
}
.bar-code {
	width: 100%;
}
.skin-blue {
	background-color: #009bf0 !important;
}
.code-container {
	margin: 20px 20px 0;
	background: #fff;
	border-radius: 10px;
}
.share-info {
	background: #efefef;
	padding: 15px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.share-info a {
	display: block;
}
.share-icon {
	width: 40px;
	height: 40px;
	background: #04BE02;
	border-radius: 50%;
	display: inline-block;
	margin: 5px 5px 10px;
	cursor: pointer;
}
.share-icon:active {
  background-color: #039702;
}
.share-icon img {
	width: 28px;
	height: 28px;
	margin: 6px;
}

.share-title {
	background: #efefef;
	padding: 15px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.qrcode {
	padding: 10px;
	text-align: center;
}
.qrcode img {
	width: 95%;
	margin: 5px auto;
}

.share-hint {
	position: absolute;
	z-index: 100;
	top: 15px;
	right: 0;
}

/* Refuel */
.refuel-container {
	background: #fff;
	border-radius: 10px;
	border: 1px dashed #009bf0;
}
.refuel-info {
	width: 49%;
	display: inline-block;
	text-align: center;
	font-size: 24px;
}
.refuel-info:first-child {
	border-right: 1px dashed #009bf0;
}
.refuel-info:last-child {
	float: right;
}
.refuel-info p {
	padding: 20px 0;
	color: #888;
}
.refuel_input {
	width: 100%;
	height: 22px;
	line-height: 22px;
	padding: 10px 0;
	font-size: 17px;
	background-color: #FFFFFF;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	color: #D9D9D9;
}
.refuel_input .refuel_content {
	padding: 0 15px;
}
.alert-info {
	font-size: 14px;
	margin-top: 15px;
}

.navi-address {
	font-size: 14px;
	color: #888;
	display: block;
}
.navi-icon {
	width: 25px;
	height: 25px;
	margin-left: 10px;
}

.balance-pay {
	font-weight: bold;
	display: block;
}

.record-info {
	font-size: 14px;
	color: #888;
	display: block;
}
.record-price {
	margin-left: 30px;
	color: #d9001d;
	font-weight: bold;
}

.gas-card-container {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.gas-bg-1 {
	background-image: url('../images/gas-station-1.jpg');
}
.gas-bg-2 {
	background-image: url('../images/gas-station-2.jpg');
}
.gas-bg-3 {
	background-image: url('../images/gas-station-3.jpg');
}
.gas-card {
	width: 100%;
	height: 100%;
	/*background: rgba(0, 155, 240, 0.2);*/
	background: url('../images/bg-glass.png');
	border-radius: 10px;
}
.gas-station-name {
	padding: 15px 15px 20px;
}
.gas-station-name p:first-child {
	float: left;
}
.gas-station-name p:last-child {
	float: right;
}
.gas-card h1 {
	line-height: 100px;
	letter-spacing: 4px;
}
.gas-card-detail {
	height: 30px;
	background: rgba(0, 155, 240, 0.4);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	padding: 2px 15px;
	color: #fff;
}
.gas-card-detail div {
	width: 50%;
}
.gas-card-detail div:first-child {
	float: left;
}
.gas-card-detail div:last-child {
	float: right;
	text-align: right;
}

/* Agreement */
.agreement {
	padding: 20px;
	color: #888;
	text-indent: 32px;
}

/* Lock Screen */
.lock-screen-pwd {
	text-align: center;
	margin: 25px 0;
}
.pwd-container {
	width: 200px;
	margin: 0 auto;
}
.lock-screen-pwd .pwd {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid #009bf0;
	margin: 2px;
	display: inline-block;
}
.lock-screen-pwd .pwd-full {
	background: #009bf0;
}
.lock-screen-keyboard {
	position: fixed;
	bottom: 50px;
	width: 100%;
}
.lock-screen-keyboard .key {
	width: 33.33333333%;
	display: inline-block;
	height: 50px;
	background: #fff;
	text-align: center;
	color: #009bf0;
	font-weight: 500;
	font-size: 25px;
	line-height: 50px;
	margin: 0;
	position:relative;
	float:left;
	cursor: pointer;
}
.lock-screen-keyboard .key:active {
	color: #fff;
	background: #009bf0;
}
.lock-screen-keyboard .key-reverse {
	width: 33.33333333%;
	display: inline-block;
	height: 50px;
	text-align: center;
	font-weight: 500;
	font-size: 25px;
	line-height: 50px;
	margin: 0;
	position:relative;
	float:left;
	background: #009bf0;
	color: #fff;
	cursor: pointer;
}
.lock-screen-keyboard .key-reverse:active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #0071ae;
}
.key-border-top {
	border-top: 1px solid #009bf0;
	margin-top: 1px;
}
.key-border-bottom {
	border-bottom: 1px solid #009bf0; 
}
.key-line-1,
.key-line-2 {
	width: 1px;
	height: 204px;
	position: fixed;
	bottom: 50px;
	background: #009bf0;
}
.key-line-1 {
	left: 33.33333333%;
}
.key-line-2 {
	left: 66.66666667%;
}

/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal, .wobble-horizontal:focus, .wobble-horizontal:active {
  -webkit-animation-name: wobble-horizontal;
  animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Useful */
.pad {
	padding: 15px;
}
.pad-10 {
	padding: 10px;
}
.pad-20 {
	padding: 20px;
}
.padding-t-10 {
	padding-top: 10px;
}
.padding-t-20 {
	padding-top: 20px;
}
.padding-t-50 {
	padding-top: 50px;
}
.no-padding-t {
	padding-top: 0 !important;
}
.no-padding-b {
	padding-bottom: 0 !important;
}
.no-padding-l {
	padding-left: 0 !important;
}
.margin-t-20 {
	margin-top: 20px;
}
.margin-b-50 {
	margin-bottom: 50px;
}
.padding-b-0 {
	padding-bottom: 0px;
}
.text-white {
	color: #fff !important;
}
.text-black {
	color: #333 !important;
}
.text-red {
	color: #d9001d !important;
}
.text-blue {
	color: #009bf0 !important;
}
.text-green {
	color: #0fbb6c !important;
}
.text-gray {
	color: #888 !important;
}
.border-bottom {
	border-bottom: 1px solid #D9D9D9;
}
.bg-white {
	background-color: #fff !important;
}
.bg-blue {
	background-color: #009bf0 !important;
}
.bg-gray {
	background-color: #fbf9fe !important;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.no-before:before {
	border-top: none;
}
.no-border-radius {
	border-radius: 0;
}
.small-font {
	font-size: 14px;
}
.display-block {
	display: block;
}

.data-end {
	text-align: center;
	color: #888;
	margin: 0 auto;
}

/* Button */
.weui_btn_primary {
  background-color: #009bf0;
  color: #fff;
}
.weui_btn_primary:not(.weui_btn_disabled):visited {
  color: #FFFFFF;
}
.weui_btn_primary:not(.weui_btn_disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #0071ae;
}
#countDown {
	width: 82px;
}

button:disabled {
	color: #fff;
	background-color: #ccc;
	cursor: not-allowed;
}

/* Keyboard Input */
.weui_cell .keyboard-input {
	border: 0;
	background: #fff;
	height: 44px;
	width: 30px;
	line-height: 44px;
	font-size: 17px;
	outline: 0;
	border-right: 1px solid #D9D9D9;
	border-top: 1px solid #D9D9D9;
}

.weui_cell .ui-keyboard-input-current {
    -moz-box-shadow: 0 !important;
    -webkit-box-shadow: 0 !important;
    box-shadow: 0 !important;
}

/* Keyboard in Register Page */
.oil_keyboard {
    z-index: 13;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #FAFAFC;
    text-align: center;
    border-radius: 3px;
}
.oil_key {
	padding: 10px;
	height: 100%;
}
.oil_key div {
	width: 12.5%;
    display: inline-block;
    position:relative;
    float: left;
}
.oil_key > div > p {
	background: #ddd;
    border-radius: 4px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}
.oil_key > div > p:active {
	color: #fff;
	background: #009bf0;
}

/* Keyboard in Refuel Page */
.refuel_keyboard {
    z-index: 13;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #FAFAFC;
    text-align: center;
    border-radius: 3px;
}
.refuel_key {
	padding: 10px;
	height: 100%;
}
.refuel-key-20,
.refuel-key-25,
.refuel-key-33,
.refuel-key-75,
.refuel-key-submit,
.refuel-key-cancel {
    display: inline-block;
    position:relative;
    float: left;
}
.refuel-key-20 {
	width: 20%;
}
.refuel-key-25,
.refuel-key-submit,
.refuel-key-cancel {
	width: 25%;
}
.refuel-key-33 {
	width: 33.33333333%;
}
.refuel-key-75 {
	width: 75%;
}
.refuel-key-100 {
	width: 100%;
}
.refuel-key-20 p,
.refuel-key-25 p,
.refuel-key-33 p,
.refuel-key-75 p,
.refuel-key-submit p,
.refuel-key-cancel p {
	background: #ddd;
    border-radius: 4px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}
.refuel-key-75 p {
	height: 100%;
	line-height: 100%;
}
.refuel_key > div > p:active,
.refuel-key-33 p:active {
	color: #fff;
	background: #009bf0;
}
.refuel_value {
	width: 100%;
}
.refuel_value h4 {
	background: #fff;
	border: 1px solid #D9D9D9;
	border-radius: 4px;
	font-size: 17px;
	font-weight: normal;
	text-align: left;
	padding: 10px 15px;
}

.weui_actionsheet_action {
    margin-top: 0;
	border-top: 1px solid #D9D9D9;
}

/* Footer */
.footer {
	text-align: center;
	font-size: 14px;
	width: 100%;
	height: 50px;
	color: #888;
	position: fixed;
	bottom: 0;
	margin-top: 50px;
}
.footer-relative {
	text-align: center;
	font-size: 14px;
	width: 100%;
	height: 50px;
	color: #888;
	position: relative;
	margin: 0 auto;
}
.footer span,
.footer-relative span {
	height: 18px;
}
.footer img,
.footer-relative img {
	height: 18px;
	display: absolute;
	margin-top: 15px;
}
.push {
	height: 50px;
}